<template>
  <div>
    <Header></Header>
    <div>
      <img src="../../public/header.png" alt="" />
    </div>
    <div class="sec">
      <ul class="firul">
        <li>
          <span>第一分类：</span>
          <ul class="secul">
            <li
              v-for="(first, i) in nav"
              :key="i"
              :class="i == firstNum ? 'clickedNav' : ''"
              @click="firstClick(i)"
            >
              {{ first.firstKind }}
            </li>
          </ul>
        </li>
        <li>
          <span>第二分类：</span>
          <ul class="secul">
            <li
              v-for="(second, i) in secondNav"
              :class="i == secondNum ? 'clickedNav' : ''"
              :key="i"
              @click="secondClick(i)"
            >
              {{ second }}
            </li>
          </ul>
        </li>
        <li>
          <span>内容类型：</span>
          <ul class="secul">
            <li :class="type == 0 ? 'clickedNav' : ''" @click="typeClick(0)">
              文章
            </li>
            <li :class="type == 1 ? 'clickedNav' : ''" @click="typeClick(1)">
              视频
            </li>
          </ul>
        </li>
      </ul>
      <div class="mainList">
        <div class="sec_module">
          <span :class="secType == 0 ? 'click' : ''" @click="changeSecType(0)"
            >最高热度</span
          >
          <span :class="secType == 1 ? 'click' : ''" @click="changeSecType(1)"
            >最新发布</span
          >
          <div>
            <el-input
              placeholder="请输入内容"
              v-model="secMain"
              prefix-icon="el-icon-search"
              clearable
              @change="getSecList"
            ></el-input
            ><el-button icon="el-icon-search" type="primary" @click="getSecList"
              >搜索</el-button
            >
          </div>
        </div>
        <ul v-if="type == 0" class="article clear">
          <Card v-for="ifem in dataList" :key="ifem.id" :liData="ifem" />
        </ul>
        <ul v-if="type == 1" class="video clear">
          <VideoCard v-for="ifem in dataList" :key="ifem.id" :liData="ifem" />
        </ul>
        <el-empty :image-size="240" v-if="dataList.length == 0"></el-empty>

        <div v-if="dataList.length !== 0">
          <el-pagination
            class="fenye"
            background
            layout="prev, pager, next, jumper"
            :page-size="12"
            :total="allDataLength"
            :current-page.sync="currentPage"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Card from "../components/Card.vue";
import VideoCard from "../components/VideoCard.vue";
import axios from "axios";
export default {
  data() {
    return {
      nav: [
        {
          firstKind: "公共",
          secondKind: ["公共"],
        },
        {
          firstKind: "哲学",
          secondKind: [
            "哲学",
            "马克思主义哲学",
            "中国哲学",
            "外国哲学",
            "逻辑学",
            "伦理学",
            "美学",
            "宗教学",
            "科学技术哲学",
          ],
        },
        {
          firstKind: "经济学",
          secondKind: [
            "理论经济学",
            "应用经济学",
            "金融",
            "应用统计",
            "税务",
            "国际商务",
            "保险",
            "资产评估",
            "审计",
          ],
        },
        {
          firstKind: "法学",
          secondKind: [
            "法学理论",
            "刑法学",
            "宪法学",
            "诉讼法学",
            "民商法学",
            "经济法学",
            "环境与资源保护法",
            "国际法学",
          ],
        },
        {
          firstKind: "教育学",
          secondKind: [
            "学前教育",
            "高等教育",
            "成人教育",
            "职业技术教育",
            "特殊教育",
            "心理学",
          ],
        },
        {
          firstKind: "文学",
          secondKind: [
            "汉语言文学",
            "中国古代文学",
            "中国现当代文学",
            "中国少数民族语言文学",
            "英语",
            "俄语",
            "法语",
            "德语",
            "日语",
            "阿拉伯语",
          ],
        },
        {
          firstKind: "历史",
          secondKind: [
            "史学史",
            "考古学",
            "历史地理学",
            "历史文献学",
            "中国古代史",
            "中国近代史",
            "世界史",
          ],
        },
        {
          firstKind: "理学",
          secondKind: [
            "数学",
            "物理学",
            "化学",
            "生物学",
            "天文学",
            "大气科学",
            "海洋科学",
            "地质学",
          ],
        },
        {
          firstKind: "工学",
          secondKind: [
            "机械工程",
            "光学工程",
            "材料科学工程",
            "电气工程",
            "电子科学与技术",
            "计算机科学与技术",
            "建筑学",
            "土木工程",
            "交通运输",
            "食品科学",
          ],
        },
        {
          firstKind: "农学",
          secondKind: [
            "作物学",
            "园艺学",
            "农业资源",
            "植物保护",
            "畜牧学",
            "兽医学",
            "林学",
            "水产",
          ],
        },
        {
          firstKind: "医学",
          secondKind: [
            "基础医学",
            "临床医学",
            "口腔医学",
            "中医学",
            "药学",
            "中药学",
            "儿童医学",
            "公共卫生与预防医学",
          ],
        },
        {
          firstKind: "军事学",
          secondKind: [
            "军事历史",
            "战略学",
            "战役学",
            "战术学",
            "军队指挥学",
            "军制学",
            "军队政治",
            "军事装备学",
          ],
        },
        {
          firstKind: "管理学",
          secondKind: [
            "管理科学与工程",
            "工商管理",
            "农林经济管理",
            "公共管理",
            "图书馆、情报与档案管理",
            "兽医学",
            "林学",
            "水产",
          ],
        },

        {
          firstKind: "艺术",
          secondKind: [
            "艺术学",
            "音乐",
            "美术",
            "设计艺术",
            "戏剧戏曲",
            "电影",
            "舞蹈",
            "广播电视艺术",
            "新闻",
          ],
        },
      ],
      userData: {},
      secondNav: ["公共"],
      firstNum: 0,
      secondNum: 0,
      type: 1,
      currentPage: 1,
      cardNum: 9,
      dataList: [],
      Mycollect: [],
      allDataLength: 0,
      secMain: "",
      secType: 0,
    };
  },
  components: { Header, Card, VideoCard },
  watch: {
    $route: {
      handler() {
        this.type = this.$route.query.type;
        this.getDataList();
        //深度监听，同时也可监听到param参数变化
      },
      deep: true,
    },
  },
  created() {
    this.userData = JSON.parse(localStorage.getItem("token") || "{}");
    this.firstNum = this.$route.query.m_type || 0;
    this.secondNav = this.nav[this.firstNum].secondKind;
    this.type = this.$route.query.type || 0;
    if (this.$route.query.sec) {
      this.secMain = this.$route.query.sec;
      this.getSecList();
    } else {
      this.getDataList();
    }
  },
  mounted() {},
  methods: {
    getDataList() {
      axios
        .post(`http://localhost:3000/getDataList`, {
          contentType: this.type,
          major: this.firstNum + "-" + this.secondNum,
          secMain: this.secMain,
          secType: this.secType,
          userId: this.userData.u_id,
          yeNum: 0,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            if (this.type == 1) {
              this.dataList = ret.data.DataList;
              this.allDataLength = ret.data.dataLength;
            } else if (this.type == 0) {
              this.dataList = ret.data.DataList;
              this.Mycollect = ret.data.collect;
              this.allDataLength = ret.data.dataLength;
              this.dataList.forEach((e1, v1) => {
                this.Mycollect.forEach((e2) => {
                  if (e1.id == e2.c_works) {
                    this.dataList[v1].collect = 1;
                    this.dataList[v1].c_id=e2.c_id;
                  }
                });
              });
            }
          } else {
            this.dataList = [];
          }
        });
    },
    getSecList() {
      axios
        .post(`http://localhost:3000/getSecList`, {
          contentType: this.type,
          secMain: this.secMain,
          secType: this.secType,
          userId: this.userData.u_id,
          yeNum: 0,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            if (this.type == 1) {
              this.dataList = ret.data.DataList;
              this.allDataLength = ret.data.dataLength;
              var major = ret.data.DataList[0].type.split("-");
              this.firstNum = major[0];
              this.secondNum = major[1];
              this.secondNav = this.nav[this.firstNum].secondKind;
            } else if (this.type == 0) {
              this.dataList = ret.data.DataList;
              this.Mycollect = ret.data.collect;
              this.allDataLength = ret.data.dataLength;
              this.dataList.forEach((e1, v1) => {
                this.Mycollect.forEach((e2) => {
                  if (e1.id == e2.c_works) {
                    this.dataList[v1].collect = 1;
                    this.dataList[v1].c_id=e2.c_id;
                  }
                });
              });
              // var major = ret.data.DataList[0].type.split("-");
              this.firstNum = major[0];
              this.secondNum = major[1];
              this.secondNav = this.nav[this.firstNum].secondKind;
            }
          } else {
            this.dataList = [];
          }
        });
    },
    handleCurrentChange(val) {
      axios
        .post("http://localhost:3000/getDataList", {
          contentType: this.type,
          major: this.firstNum + "-" + this.secondNum,
          secMain: this.secMain,
          secType: this.secType,
          userId: this.userData.u_id,
          yeNum: val - 1,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            if (this.type == 1) {
              this.dataList = ret.data.DataList;
              this.allDataLength = ret.data.dataLength;
            } else if (this.type == 0) {
              this.dataList = ret.data.DataList;
              this.Mycollect = ret.data.collect;
              this.allDataLength = ret.data.dataLength;
              this.dataList.forEach((e1, v1) => {
                this.Mycollect.forEach((e2,v2) => {
                  if (e1.id == e2.c_works) {
                    this.dataList[v1].collect = 1;
                    console.log(this.Mycollect[v2].c_id);
                    this.dataList[v1].c_id=this.Mycollect[v2].c_id;
                  }
                });
              });
            }
          } else {
            this.dataList = [];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changeSecType(num) {
      this.secType = num;
      if (this.secMain == "") {
        this.getDataList();
      } else {
        this.getSecList();
      }
    },
    firstClick(num) {
      this.firstNum = num;
      this.secondNum = 0;
      this.secondNav = this.nav[num].secondKind;
      this.getDataList();
    },
    secondClick(num) {
      this.secondNum = num;
      this.getDataList();
    },
    typeClick(num) {
      this.type = num;
      if (this.secMain == "") {
        this.getDataList();
      } else {
        this.getSecList();
      }
    },
  },
};
</script>

<style scoped>
.sec {
  width: 1200px;
  margin: auto;
}

.firul {
  border-bottom: 3px solid #66b1ff;
}
.firul > li {
  display: flex;
  margin: 30px 20px;
  transition: 00.3s;
}
.secul {
  display: flex;
}
.secul > li {
  font-size: 14px;
  padding: 5px 10px;
  margin: 0 10px;
  cursor: pointer;
  transition: 00.3s;
  border-radius: 5px;
}
.mainList {
  min-height: 750px;
  background-color: #f6f9fa;
  padding: 20px 40px;
}
.sec_module {
  display: flex;
}
.sec_module > span {
  padding: 10px 20px;
  margin: 0 20px;
  cursor: pointer;
  border-radius: 10px;
  transition: 0.3s;
}
.sec_module > span:hover {
  background-color: #66b1ff;
  color: white;
}
.sec_module > span.click {
  background-color: #66b1ff;
  color: white;
}
.sec_module > div {
  width: 500px;
  display: flex;
}
.mainList > ul.article {
  width: 100%;
}
.mainList > ul.article > li {
  float: left;
  margin: 0 30px 30px 30px;
}
.mainList > ul.video > li {
  float: left;
  margin: 20px 40px 20px 0;
}
.mainList > ul.video > li:nth-of-type(4n) {
  margin-right: 0;
}
.mainList > div {
  padding: 10px;
  text-align: center;
}
</style>
